<template>
  <div id="container">
    <button id="dadian" v-on:click="showPoint()">显示/隐藏打点</button>
    <div id="map">
      <canvas id="myCanvas" width="1400" height="1600">
        您的浏览器不支持 HTML5 canvas 标签。
      </canvas>
      <Hover ref="hover"></Hover>
    </div>
  </div>
</template>


<script>

    import {PointToSegDist,pointset,getRandomColor,getRgbArray} from "../util.js"
    import Hover from "./Hover";
    export default {
      name: "mymap",
      components: {Hover},
      data() {
        return {
          AGVnum:5,
          AGVs:[],//列表元素为{tween: tween, ref: agv, color : color, hidden: true}
          lines:[],//列表元素为{pointarr,current,dottedLine,fullLine}
          stage:null,
          showPoints:null,
          AITDetailList:[],
          currentHover:0,
        }
      },
      mounted() {
        this.init();
      },
      methods:{
        init(){
          this.stage = new createjs.Stage("myCanvas");
          createjs.CSSPlugin.install(createjs.Tween);
          this.stage.enableMouseOver(20);

          this.initYard1({x:122, y:1109} , 10, 310);//堆场1
          this.initYard1({x:457, y:1109} , 10, 310);//堆场2
          this.initYard1({x:792, y:1109} , 10, 310);//堆场3
          this.initYard1({x:1127, y:1109} , 10, 151);//堆场4
          this.initYard2({x:122, y:796} , 8, 310);//堆场5
          this.initYard2({x:457, y:796} , 8, 310);//堆场6
          this.initYard2({x:792, y:796} , 8, 310);//堆场7
          this.initYard2({x:1127, y:796} , 8, 151);//堆场8

          this.longitude_road({x:97, y:1220}, 25, 844);//经2
          this.longitude_road({x:432, y:1220}, 25, 844);//经3
          this.longitude_road({x:767, y:1220}, 25, 844);//经4
          this.longitude_road({x:1102, y:1220}, 25, 844);//经5
          this.longitude_road({x:1278, y:1134}, 25, 758);//经6

          this.approach_bridge({x:97, y:1430},25,210);//引桥1
          this.approach_bridge({x:432, y:1456},25,236);//引桥2
          this.approach_bridge({x:767, y:1483},25,263);//引桥3
          this.approach_bridge({x:1102, y:1511},25,291);//引桥4

          this.bankroad({x:93, y:1481},{x:1299, y:1578},{x:95,y:1451},{x:1301,y:1548});//岸边大路
          this.bankroad({x:95,y:1451},{x:1301,y:1548},{x:97,y:1430},{x:1303,y:1527});//岸边小路

          this.latitude_road({x:97, y:1134},1181,25,6);//纬1
          this.latitude_road({x:97, y:811},1181,15,4);//纬2
          this.latitude_road({x:97, y:563},1181,15,4);//纬3
          this.latitude_road({x:97, y:401},1181,25,6);//纬4
          this.AGVArea();

          //this.showPoint();

          createjs.Ticker.setFPS(5);
          createjs.Ticker.addEventListener("tick", this.handleTick);
          this.stage.on("stagemousedown",this.handleStageClick,null,false,"stage was clicked");

        },

        longitude_road(position,width,height){
          //绘制纵向道路
          //position: 道路左上角坐标  width:道路宽  height:道路长
          position.y=1600-position.y;
          //双向3车道，中间要有实线，4条虚线
          var road=new createjs.Shape();
          road.graphics.beginFill("#ffffff").drawRect(position.x,position.y,width,height);
          for(var i=1;i<6;i++) {
            if (i !== 3) {
              road.graphics.beginStroke("black").setStrokeDash([20, 20], 0).setStrokeStyle(0.5).moveTo(position.x + width/6*i, position.y).lineTo(position.x + width/6*i, position.y + height);
            }
            else road.graphics.beginStroke("black").setStrokeDash().moveTo(position.x + width/6*i, position.y).lineTo(position.x + width/6*i, position.y + height);
          }
          this.stage.addChild(road);
        },

        latitude_road(position,width,height,num){
          //绘制横向道路
          //position: 道路左上角坐标  width:道路宽  height:道路长 num为车道数目
          position.y=1600-position.y;
          var road=new createjs.Shape();
          road.graphics.beginFill("#ffffff").drawRect(position.x,position.y,width,height);
          if(num!==1) {
            for (var i = 1; i < num; i++) {
              if (i !== num/2) {
                road.graphics.beginStroke("black").setStrokeDash([20, 20], 0).setStrokeStyle(0.5).moveTo(position.x, position.y + height/num*i).lineTo(position.x + width, position.y + height/num*i);
              }
              else road.graphics.beginStroke("black").setStrokeDash().moveTo(position.x, position.y + height/num*i).lineTo(position.x + width, position.y + height/num*i);
            }
          }
          this.stage.addChild(road);
        },

        approach_bridge(position,width,height){
          //绘制引桥
          position.y=1600-position.y;
          //双向3车道，中间要有实线，4条虚线
          var road=new createjs.Shape();
          road.graphics.beginFill("#f5f5f5").drawRect(position.x,position.y,width,height);
          for(var i=1;i<4;i++) {
            if (i !== 2) {
              road.graphics.beginStroke("black").setStrokeDash([20, 20], 0).setStrokeStyle(0.5).moveTo(position.x + width/4*i, position.y).lineTo(position.x + width/4*i, position.y + height);
            }
            else road.graphics.beginStroke("black").setStrokeDash().moveTo(position.x + width/4*i, position.y).lineTo(position.x + width/4*i, position.y + height);
          }
          this.stage.addChild(road);
        },

        initYard1(position,num,width){
          //绘制堆场 yard1 的heigth为297
          //y轴和canvas的y反了,num个宽，num+1个窄，宽路高度22px，窄路高度7px
          position.y=1600-position.y;
          //Create a stage by getting a reference to the canvas.Create a Shape DisplayObject.
          var yard = new createjs.Shape();
          yard.graphics.beginFill("#d2d9dc").drawRoundRect(position.x,position.y,width,297,5);
            /*
            for(var i=1;i<num+1;i++){
              position.y=position.y+7;
              yard.graphics.beginStroke("black").moveTo(position.x,position.y).lineTo(position.x+width,position.y);
              position.y=position.y+22;
              yard.graphics.moveTo(position.x,position.y).lineTo(position.x+width,position.y);
            }
            position.y=position.y+7;
            yard.graphics.moveTo(position.x,position.y).lineTo(position.x+width,position.y);
            */
          this.stage.addChild(yard);
            //stage 添加有先后顺序
          position.y=1600-position.y;
          for(var i=0;i<num+1;i++) {
            this.latitude_road({x:position.x,y:position.y-29*i},width,7,1);
          }
        },

        initYard2(position,num,width){
          // yard2 的heigth为234
          //y轴和canvas的y反了,num个宽，num+1个窄，宽路高度19px，窄路高度9px
          position.y=1600-position.y;
          //Create a stage by getting a reference to the canvas.Create a Shape DisplayObject.
          var yard = new createjs.Shape();
          yard.graphics.beginFill("#d2d9dc").drawRoundRect(position.x,position.y,width,234,5);

          this.stage.addChild(yard);
          position.y=1600-position.y;
          for(var i=0;i<num+1;i++) {
            this.latitude_road({x:position.x,y:position.y-28*i},width,9,1);
          }
        },

        bankroad(position1,position2,position3,position4){
          //岸边路
          //num为车道数目
          position1.y=1600-position1.y;
          position2.y=1600-position2.y;
          position3.y=1600-position3.y;
          position4.y=1600-position4.y;
          var road=new createjs.Shape();
          road.graphics.beginStroke("black").setStrokeStyle(0.5).beginFill("#ffffff").moveTo(position1.x,position1.y).lineTo(position2.x,position2.y).lineTo(position4.x,position4.y).lineTo(position3.x,position3.y).lineTo(position1.x,position1.y);
          this.stage.addChild(road);
        },

        AGVArea(){
          //绘制充电区
          var area1=new createjs.Shape();
          area1.graphics.beginFill("#d2d9dc").drawRect(457,1600-1220,310,86);
          var area2=new createjs.Shape();
          area2.overColor = "#ff2233";
          area2.outColor = "#ffffff";
          area2.graphics.beginFill("#ffffff").drawRect(0,0,260,66);
          area2.x=480;
          area2.y=1600-1200;
          //area2.on("mouseover",handleAGVAreaMouseOver,null,false,{x:260,y:66});
          //area2.on("mouseout",handleAGVAreaMouseOut,null,false,{x:260,y:66});
          this.stage.addChild(area1);
          this.stage.addChild(area2);
        },

        initAGV(positionObj,AITLIST) {
          //console.log(this.stage);
          // console.log(positionObj);
          this.AITDetailList=AITLIST;
          console.log(AITLIST);
          console.log(this.AITDetailList);
          //当前设计中，充电区域top：400-466 left：480-740
          var rgbArray=getRgbArray(this.AGVnum);
          //console.log(rgbArray);
          for (var i = 0; i < this.AGVnum; i++) {
            var agv = new createjs.Shape();
            var agvcolor=rgbArray[i];
            agv.graphics.beginFill(agvcolor).drawCircle(0, 0, 3);
            agv.x=positionObj[i].x;
            agv.y=positionObj[i].y;
            agv.id=i;
            agv.on("click",this.handleAGVClick,null,false,"agv was clicked");
            var tween = createjs.Tween.get(agv);
            this.AGVs.push({tween: tween, ref: agv, color: agvcolor, hidden: true});
            this.lines.push({pointarr:[],current:0,fullLine:null,dottedLine:null});
            this.stage.addChild(agv);
          }
        },
        handleTick(event) {
          //小车当前位置应处于cur和cur+1的线段上
          for(var i=0;i<this.AGVnum;i++) {
            var cur = this.lines[i].current;
            if (cur < this.lines[i].pointarr.length - 1) {
              var position = {x: this.AGVs[i].ref.x, y: this.AGVs[i].ref.y};
              var point1 = this.lines[i].pointarr[cur];
              var point2 = this.lines[i].pointarr[cur + 1];
              if(cur < this.lines[i].pointarr.length - 2){
                var point3 = this.lines[i].pointarr[cur + 2];
                if(PointToSegDist(point1,point2,position)>PointToSegDist(point2,point3,position)){
                  this.lines[i].current++;
                  cur++;
                }
              }
              this.stage.removeChild(this.lines[i].dottedLine);
              this.stage.removeChild(this.lines[i].fullLine);

              var full = new createjs.Shape();
              var color=this.AGVs[i].color;
              full.graphics.beginStroke(color).setStrokeStyle(1.5);
              for (var k = 0; k < cur; k++) {
                full.graphics.moveTo(this.lines[i].pointarr[k].x, this.lines[i].pointarr[k].y).lineTo(this.lines[i].pointarr[k + 1].x, this.lines[i].pointarr[k + 1].y);
              }
              full.graphics.moveTo(this.lines[i].pointarr[cur].x, this.lines[i].pointarr[cur].y).lineTo(position.x,position.y);
              if(!this.AGVs[i].hidden) {
                this.stage.addChild(full);
              }
              this.lines[i].fullLine = full;

              if (cur < this.lines[i].pointarr.length - 1) {
                var dot = new createjs.Shape();
                dot.graphics.beginStroke(color).setStrokeDash([10, 10], 10).setStrokeStyle(1.5);
                dot.graphics.moveTo(position.x,position.y).lineTo(this.lines[i].pointarr[cur + 1].x, this.lines[i].pointarr[cur + 1].y);
                for (var j = cur + 1; j < this.lines[i].pointarr.length - 1; j++) {
                  dot.graphics.moveTo(this.lines[i].pointarr[j].x, this.lines[i].pointarr[j].y).lineTo(this.lines[i].pointarr[j + 1].x, this.lines[i].pointarr[j + 1].y);
                }
                if(!this.AGVs[i].hidden) {
                  this.stage.addChild(dot);
                }
                this.lines[i].dottedLine = dot;
              }
            }
          }
          this.stage.update();
        },
        move(agvid,target){
          createjs.Tween.get(this.AGVs[agvid].ref)
            .to(target,100,createjs.Ease.linear);
          //.set({label:"hello!"})
          //.wait(500).to({alpha:0,visible:false},1000)
          //.call(onComplete);
        },

        line(agvid,pointarr){
          //绘制预定路线
          this.lines[agvid].pointarr=pointarr;
          this.lines[agvid].current=0;
          var dot=new createjs.Shape();
          var color=this.AGVs[agvid].color;
          dot.graphics.beginStroke(color).setStrokeDash([20, 20], 0).setStrokeStyle(1);
          for(var i=0;i<pointarr.length-1;i++){
            dot.graphics.moveTo(pointarr[i].x,pointarr[i].y).lineTo(pointarr[i+1].x,pointarr[i+1].y);
          }
          this.stage.addChild(dot);
          this.lines[agvid].dottedLine=dot;
          var full=new createjs.Shape();
          this.stage.addChild(full);
          this.lines[agvid].fullLine=full;
        },

        showPoint(){
          if(this.showPoints==null) {
            var points = new createjs.Shape();
            for (var i = 0; i < pointset.length; i++) {
              points.graphics.beginFill("#3867ff").drawCircle(pointset[i].x, pointset[i].y, 2);
            }
            this.stage.addChild(points);
            this.showPoints=points;
          }
          else{
            this.stage.removeChild(this.showPoints);
            this.showPoints=null;
          }
        },
        handleStageClick(event,data) {
          //var target = event.target;
          for (var i = 0; i < this.AGVnum; i++) {
            this.AGVs[i].hidden=true;
          }
          this.$refs.hover.updateSeen(false);
          console.log(data);
        },
        handleAGVClick(event,data) {
          var target = event.target;
          this.AGVs[target.id].hidden=false;
          console.log(target.id);
          this.currentHover=target.id;
          this.$refs.hover.updatePositionStyle(target.x,target.y);
          this.$refs.hover.updateAITDetail(this.AITDetailList[target.id]);
          this.$refs.hover.updateSeen(true);
        },
        updateAITDetailList(AITList){
          this.AITDetailList=AITList;
          this.$refs.hover.updateAITDetail(this.AITDetailList[this.currentHover]);
        }

      }
    }

    function handleAGVAreaMouseOver(event,data) {
      var target = event.target;
      target.graphics.clear().beginFill(target.overColor).drawRect(0, 0, data.x, data.y).endFill();
    }

    function handleAGVAreaMouseOut(event,data) {
      var target = event.target;
      target.graphics.clear().beginFill(target.outColor).drawRect(0, 0, data.x, data.y).endFill();
    }


</script>

<style scoped>

  #myCanvas{
    z-index:0;
    border:1px solid #c3c3c3;
    background-image: linear-gradient(to bottom,deepskyblue 23.77%, aliceblue 0);
  }
  #container{
    display:flex;
    flex-direction: column;
  }
  #map{
    background-color: #ffffff;
    width: 1400px;
    height: 2000px;
    position: relative;
    margin-left: 20px;
  }
  #dadian{
    width:100px;
    height:50px;
    margin-bottom: 10px;
    margin-left: 20px;
  }

</style>
